<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="14" :offset="2">
        <!-- 左侧 -->
        <!-- 基本信息 -->
        <el-card class="box-card">
          <div class="bg">
            <div class="info">
              <div style="font-size: 40px; padding: 20px 0px 0px 20px">
                工作台
              </div>
              <div style="padding: 20px 0px 0px 20px">
                <b style="font-size: 30px">{{ timeStr }}</b>&nbsp;&nbsp;|&nbsp;&nbsp; {{ dateStr }}
                {{ weekStr }} |温度&nbsp;&nbsp;{{ temperature }}℃
                |湿度&nbsp;&nbsp;{{ humidity }}%
              </div>
            </div>
          </div>
        </el-card>

        <!-- 功能搜索框 -->
        <div style="padding: 10px"></div>
        <el-input style="width: 50%" v-model="keyword" placeholder="查找内容" clearable>
          <el-button slot="append" icon="el-icon-search" type="primary" @click="inputChange"></el-button>
        </el-input>
        <!-- 功能列表 -->
        <div style="padding: 10px"></div>
        <div>
          <div v-for="(v1, k1) in routesUi" :key="k1" style="margin-bottom: 10px">
            <el-card>
              <div style="font-size: 20px; font-weight: bold">
                {{ v1.name }}
              </div>
              <el-row>
                <el-col v-for="(v2, k2) in v1.routes" :span="6" :key="k2">
                  <p class="icon">
                    <img :src="v2.icon" class="icon-img" @click="goToPath(v2.path)" />
                    <span style="padding-left: 3px" @click="goToPath(v2.path)">{{ v2.name }}</span>
                  </p>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="5">
        <div style="margin-left: 10px" @click="clickRenwu">
          <div class="daiban" style="padding: 10px">
            <div class="red" v-if="taskRedPoint">
              <div class="red-font">{{ taskRedPoint }}</div>
            </div>
          </div>
        </div>
        <div style="padding: 5px"></div>
        <div style="margin-left: 10px" @click="clickTongzhi">
          <div class="yiban" style="padding: 10px">
            <div class="red" v-if="noticeRedPoint">
              <div class="red-font">{{ noticeRedPoint }}</div>
            </div>
          </div>
        </div>
        <div style="padding: 5px"></div>
        <div style="margin-left: 10px" @click="clickLishigongwen">
          <div class="lishi" style="padding: 10px"></div>
        </div>
        <div style="padding: 5px"></div>
        <div style="margin-left: 10px" @click="clickGongwenshoucang">
          <div class="shoucang" style="padding: 10px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { websock } from "@/websock";
import moment from "moment";
import event from "../../event";
import axios from "axios";

export default {
  name: "Dashboard",
  async created() {
    const userRoutes = JSON.parse(sessionStorage.getItem('userRoutes'))
    this.userRoutes = [...userRoutes]

    this.updateUiRoutes();

    this.timer = setInterval(() => {
      this.updateTime();
    }, 200);

    this.getTaskRedPoint();
    this.getNoticeRedPoint();

    event.on("TASK-NEW", this.getTaskRedPoint);
    event.on("TASK-CHANGE", this.getTaskRedPoint);

    event.on("NOTIFICATION-NEW", this.getNoticeRedPoint);
    event.on("NOTIFICATION-CHANGE", this.getNoticeRedPoint);

    this.getWeatherFun();
  },
  destroyed() {
    event.off("TASK-NEW", this.getTaskRedPoint);
    event.off("TASK-CHANGE", this.getTaskRedPoint);

    event.off("NOTIFICATION-NEW", this.getNoticeRedPoint);
    event.off("NOTIFICATION-CHANGE", this.getNoticeRedPoint);
  },
  data() {
    return {
      temperature: 0, // 温度
      humidity: 0, // 湿度
      timer: null,
      dateStr: "",
      timeStr: "",
      weekStr: "",
      keyword: "",
      taskRedPoint: "",
      noticeRedPoint: "",
      // 界面配置
      uiCfg: [
        {
          name: "通知",
          routes: ["huiyi", "gongzuo", "xinxiang"],
        },
        {
          name: "物资",
          routes: ["caigoushenqing", "wuzilingyong"],
        },
        {
          name: "假勤",
          routes: ["qingjia", "chuchai", "jiaban"],
        },
        {
          name: "人事",
          routes: [
            "userManage",
            "gongzi",
            "ruzhiApply",
            "zhuanzhengApply",
            "lizhiApply",
          ],
        },
        {
          name: "行政",
          routes: [
            "duban",
            "jiaripaiban",
            "yongyin",
            "yongche",
            "jiayou",
            "huiyishi",
            "jiedaidan",
          ],
        },
        {
          name: "法务",
          routes: ["hetong", "zhaobiaowenjian"],
        },
        {
          name: "公文",
          routes: ["gongwenchuanyue", "gongwenliuzhuan", "neibufawen", "xinjianfawen", "xuanchuanbaodao"],
        },
        {
          name: "系统",
          routes: [
            "positionCon",
            "roleCon",
            "userGroup",
            "departmentCon",
            "jiejiariCon",
            "cheliangCon",
            "huiyishiCon",
            "qingjiaCon",
            "yinzhangCon",
            "eveCon",
            "rootCon",
          ],
        },
        {
          name: "绩效管理",
          routes: [
            "createTemplate",
            "assessment",
            "filling",
            "estimate",
            "dataScreening",
            "Notification",
            "management",
            "announcement",
          ],
        },
        {
          name: "党建",
          routes: [
            "dangzuzhi",
            "partyRole",
            "partyUser",
            "partyDues",
            "questionBank",
            "examPaper",
            "marking",
            "education",
            "activityLedger",
            "mailbox"
          ],
        },
        {
          name: "项目管理",
          routes: [
            "openReport",
            "approvalInitiateDeclaration",
            "approveReport",
            "processProjectList",
            "processDataManagement",
            "processDataStatistics",
            "projectLibrary",
            "projectForum",
          ],
        },
        {
          name: "科研管理",
          routes: [
            "ScientificData",
            "ScientificPeople",
            "ScientificFunding",
            "release",
            "Filling",
            "approve",
          ],
        },
      ],
      // 路由配置
      routesCfg: {
        huiyi: {
          name: "会议通知",
          path: "/tongzhi/huiyi",
          icon: require("../../assets/work/1.png"),
        },
        gongzuo: {
          name: "工作通知",
          path: "/tongzhi/gongzuo",
          icon: require("../../assets/work/7.png"),
        },
        xinxiang: {
          name: "信箱通知",
          path: "/tongzhi/xinxiang",
          icon: require("../../assets/work/sjxx.png"),
        },
        caigoushenqing: {
          name: "采购申请",
          path: "/wuziManage/caigoushenqing",
          icon: require("../../assets/work/2.png"),
        },
        wuzilingyong: {
          name: "物资领用",
          path: "/wuziManage/wuzilingyong",
          icon: require("../../assets/work/3.png"),
        },
        qingjia: {
          name: "请假申请",
          path: "/jiaqingManage/qingjia",
          icon: require("../../assets/work/4.png"),
        },
        chuchai: {
          name: "出差申请",
          path: "/jiaqingManage/chuchai",
          icon: require("../../assets/work/5.png"),
        },
        jiaban: {
          name: "加班申请",
          path: "/jiaqingManage/jiaban",
          icon: require("../../assets/work/6.png"),
        },
        userManage: {
          name: "员工管理",
          path: "/renshiManage/userManage",
          icon: require("../../assets/work/9.png"),
        },
        gongzi: {
          name: "工资管理",
          path: "/renshiManage/gongzi",
          icon: require("../../assets/work/11.png"),
        },
        ruzhiApply: {
          name: "入职申请",
          path: "/renshiManage/ruzhiApply",
          icon: require("../../assets/work/8.png"),
        },
        zhuanzhengApply: {
          name: "转正申请",
          path: "/renshiManage/zhuanzhengApply",
          icon: require("../../assets/work/9.png"),
        },
        lizhiApply: {
          name: "离职申请",
          path: "/renshiManage/lizhiApply",
          icon: require("../../assets/work/10.png"),
        },
        duban: {
          name: "督办",
          path: "/xingzhengManage/duban",
          icon: require("../../assets/work/12.png"),
        },
        jiaripaiban: {
          name: "假日排班",
          path: "/xingzhengManage/jiaripaiban",
          icon: require("../../assets/work/13.png"),
        },
        yongyin: {
          name: "用印申请",
          path: "/xingzhengManage/yongyin",
          icon: require("../../assets/work/14.png"),
        },
        yongche: {
          name: "用车申请",
          path: "/xingzhengManage/yongche",
          icon: require("../../assets/work/15.png"),
        },
        jiayou: {
          name: "加油申请",
          path: "/xingzhengManage/jiayou",
          icon: require("../../assets/work/16.png"),
        },
        huiyishi: {
          name: "会议室申请",
          path: "/xingzhengManage/huiyishi",
          icon: require("../../assets/work/17.png"),
        },
        jiedaidan: {
          name: "接待单",
          path: "/xingzhengManage/jiedaidan",
          icon: require("../../assets/work/18.png"),
        },
        hetong: {
          name: "合同管理",
          path: "/fawuManage/hetong",
          icon: require("../../assets/work/19.png"),
        },
        zhaobiaowenjian: {
          name: "招标文件",
          path: "/fawuManage/zhaobiaowenjian",
          icon: require("../../assets/work/20.png"),
        },
        gongwenchuanyue: {
          name: "公文传阅",
          path: "/gongwenManage/gongwenchuanyue",
          icon: require("../../assets/work/21.png"),
        },
        gongwenliuzhuan: {
          name: "公文流转",
          path: "/gongwenManage/gongwenliuzhuan",
          icon: require("../../assets/work/22.png"),
        },
        xinjianfawen: {
          name: "新建事项",
          path: "/gongwenManage/xinjianfawen",
          icon: require("../../assets/work/28.png"),
        },
        xuanchuanbaodao: {
          name: "宣传报道",
          path: "/gongwenManage/xuanchuanbaodao",
          icon: require("../../assets/work/29.png"),
        },
        neibufawen: {
          name: "内部发文",
          path: "/gongwenManage/neibufawen",
          icon: require("../../assets/work/27.png"),
        },
        // 系统--------------------------开始
        positionCon: {
          name: "岗位配置",
          path: "/sysManage/positionCon",
          icon: require("../../assets/work/44.png"),
        },
        roleCon: {
          name: "角色配置",
          path: "/sysManage/roleCon",
          icon: require("../../assets/work/45.png"),
        },
        userGroup: {
          name: "人员分组",
          path: "/sysManage/userGroup",
          icon: require("../../assets/work/46.png"),
        },
        departmentCon: {
          name: "部门配置",
          path: "/sysManage/departmentCon",
          icon: require("../../assets/work/47.png"),
        },
        jiejiariCon: {
          name: "节假日配置",
          path: "/sysManage/jiejiariCon",
          icon: require("../../assets/work/48.png"),
        },
        cheliangCon: {
          name: "车辆配置",
          path: "/sysManage/cheliangCon",
          icon: require("../../assets/work/49.png"),
        },
        huiyishiCon: {
          name: "会议室配置",
          path: "/sysManage/huiyishiCon",
          icon: require("../../assets/work/50.png"),
        },
        qingjiaCon: {
          name: "请假配置",
          path: "/sysManage/qingjiaCon",
          icon: require("../../assets/work/51.png"),
        },
        yinzhangCon: {
          name: "印章配置",
          path: "/sysManage/yinzhangCon",
          icon: require("../../assets/work/52.png"),
        },
        eveCon: {
          name: "流程配置",
          path: "/sysManage/eveCon",
          icon: require("../../assets/work/53.png"),
        },
        rootCon: {
          name: "系统权限",
          path: "/sysManage/rootCon",
          icon: require("../../assets/work/54.png"),
        },
        // 系统--------------------------结束
        // 绩效管理--------------开始
        createTemplate: {
          name: "建立考核模板",
          path: "/performanceManage/createTemplate",
          icon: require("../../assets/work/62.png"),
        },
        assessment: {
          name: "发起考核",
          path: "/performanceManage/assessment",
          icon: require("../../assets/work/63.png"),
        },
        filling: {
          name: "考核填报",
          path: "/performanceManage/filling",
          icon: require("../../assets/work/64.png"),
        },
        estimate: {
          name: "考核评估",
          path: "/performanceManage/estimate",
          icon: require("../../assets/work/65.png"),
        },
        dataScreening: {
          name: "考核数据总览",
          path: "/performanceManage/dataScreening",
          icon: require("../../assets/work/66.png"),
        },
        Notification: {
          name: "发布绩效通知",
          path: "/performanceManage/Notification",
          icon: require("../../assets/work/67.png"),
        },
        management: {
          name: "部门绩效管理",
          path: "/performanceManage/management",
          icon: require("../../assets/work/68.png"),
        },
        announcement: {
          name: "公告管理",
          path: "/performanceManage/announcement",
          icon: require("../../assets/work/69.png"),
        },
        // 绩效管理--------------结束
        // 党建--------------开始
        dangzuzhi: {
          name: "党组织机构",
          path: "/partyManage/dangzuzhi",
          icon: require("../../assets/work/28.png"),
        },
        partyRole: {
          name: "党组织角色",
          path: "/partyManage/partyRole",
          icon: require("../../assets/work/29.png"),
        },
        partyUser: {
          name: "党组织用户",
          path: "/partyManage/partyUser",
          icon: require("../../assets/work/30.png"),
        },
        partyDues: {
          name: "党费收缴",
          path: "/partyManage/partyDues",
          icon: require("../../assets/work/31.png"),
        },
        questionBank: {
          name: "题库",
          path: "/partyManage/questionBank",
          icon: require("../../assets/work/61.png"),
        },
        examPaper: {
          name: "试卷管理",
          path: "/partyManage/examPaper",
          icon: require("../../assets/work/32.png"),
        },
        marking: {
          name: "阅卷",
          path: "/partyManage/marking",
          icon: require("../../assets/work/33.png"),
        },
        education: {
          name: "学习教育",
          path: "/partyManage/education",
          icon: require("../../assets/work/34.png"),
        },
        activityLedger: {
          name: "党员活动台账",
          path: "/partyManage/activityLedger",
          icon: require("../../assets/work/35.png"),
        },
        mailbox: {
          name: "书记信箱",
          path: "/partyManage/mailbox",
          icon: require("../../assets/work/sjxx.png"),
        },
        // 党建--------------结束
        // 项目管理--------------开始
        openReport: {
          name: "开放申报",
          path: "/projectManagement/openReport",
          icon: require("../../assets/work/36.png"),
        },
        approvalInitiateDeclaration: {
          name: "申报立项",
          path: "/projectManagement/approvalInitiateDeclaration",
          icon: require("../../assets/work/37.png"),
        },
        approveReport: {
          name: "申报审核",
          path: "/projectManagement/approveReport",
          icon: require("../../assets/work/38.png"),
        },
        processProjectList: {
          name: "项目列表",
          path: "/projectManagement/processProjectList",
          icon: require("../../assets/work/39.png"),
        },
        processDataManagement: {
          name: "资料管理",
          path: "/projectManagement/processDataManagement",
          icon: require("../../assets/work/40.png"),
        },
        processDataStatistics: {
          name: "数据统计",
          path: "/projectManagement/processDataStatistics",
          icon: require("../../assets/work/41.png"),
        },
        projectLibrary: {
          name: "项目库",
          path: "/projectManagement/projectLibrary",
          icon: require("../../assets/work/42.png"),
        },
        projectForum: {
          name: "项目论坛",
          path: "/projectManagement/projectForum",
          icon: require("../../assets/work/43.png"),
        },
        // 项目管理--------------结束
        // 项目管理--------------开始
        ScientificData: {
          name: "科研资料库",
          path: "/scientific/ScientificData",
          icon: require("../../assets/work/55.png"),
        },
        ScientificPeople: {
          name: "科研人员管理",
          path: "/scientific/ScientificPeople",
          icon: require("../../assets/work/56.png"),
        },
        ScientificFunding: {
          name: "科研业务专项资金管理",
          path: "/scientific/ScientificFunding",
          icon: require("../../assets/work/57.png"),
        },
        release: {
          name: "发布科研成果考核",
          path: "/scientific/release",
          icon: require("../../assets/work/58.png"),
        },
        Filling: {
          name: "科研成果考核填报",
          path: "/scientific/Filling",
          icon: require("../../assets/work/59.png"),
        },
        approve: {
          name: "科研成果考核审批",
          path: "/scientific/approve",
          icon: require("../../assets/work/60.png"),
        },
        // 项目管理--------------结束
      },
      userRoutes: [],
      routesUi: [],
    };
  },
  methods: {
    clickRenwu() {
      this.$router.push("/tongzhi/renwu");
    },
    clickTongzhi() {
      this.$router.push("/tongzhi/tongzhi");
    },
    clickLishigongwen() {
      this.$router.push("/gongwenManage/lishigongwen");
    },
    clickGongwenshoucang() {
      this.$router.push("/gongwenManage/gongwenshoucang");
    },
    updateUiRoutes() {
      this.routesUi = [];

      if (this.keyword != "") {
        let routes = [];
        for (let i = 0; i != this.uiCfg.length; i++) {
          let rts = this.uiCfg[i].routes;
          for (let j = 0; j != rts.length; j++) {
            let rt = rts[j];
            if (
              this.routesCfg[rt] &&
              this.routesCfg[rt].name.indexOf(this.keyword) != -1
            ) {
              if (this.routesCfg[rt]) {
                routes.push(this.routesCfg[rt]);
              }
            }
          }
        }

        this.routesUi.push({
          name: "搜索结果",
          routes: routes,
        });

        return;
      }

      for (let i = 0; i != this.uiCfg.length; i++) {
        let routes = [];
        let rts = this.uiCfg[i].routes;
        for (let j = 0; j != rts.length; j++) {
          let rt = rts[j];
          if (this.userRoutes.indexOf(rt) != -1) {
            if (this.routesCfg[rt]) {
              routes.push(this.routesCfg[rt]);
            }
          }
        }

        if (routes.length > 0) {
          this.routesUi.push({
            name: this.uiCfg[i].name,
            routes: routes,
          });
        }
      }
    },
    goToPath(p) {
      this.$router.push(p);
    },
    inputChange() {
      this.updateUiRoutes();
    },
    updateTime() {
      this.dateStr = moment().format("YYYY/MM/DD");
      this.timeStr = moment().format("HH:mm:ss");
      this.weekStr =
        "周" +
        ["日", "一", "二", "三", "四", "五", "六"][moment().get("weekday")];
    },
    async getTaskRedPoint() {
      let res = await websock.getUnfinishedTaskCnt();
      if (res === 0) return (this.taskRedPoint = "");
      if (res > 99) return (this.taskRedPoint = "99+");
      this.taskRedPoint = res + "";
    },
    async getNoticeRedPoint() {
      let res = await websock.getUnreadNotificationCnt();
      if (res === 0) return (this.noticeRedPoint = "");
      if (res > 99) return (this.noticeRedPoint = "99+");
      this.noticeRedPoint = res + "";
    },

    getWeatherFun() {
      const apiKey = "2d07b4edb42dbcb351a637fc6d93be0f";
      const apiUrl = "https://restapi.amap.com/v3/weather/weatherInfo";

      // 发起API请求
      axios
        .get(apiUrl, {
          params: {
            key: apiKey,
            city: "320900", // 替换为你要查询的城市代码
          },
        })
        .then((response) => {
          // 处理API返回的天气数据
          if (response.status == 200) {
            this.temperature = response.data.lives[0].temperature;
            this.humidity = response.data.lives[0].humidity;
          }
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  box-shadow: none !important;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #e7e7e7;
}

.el-button--primary {
  color: #fff !important;
  background-color: #2060e8 !important;
}

.dashboard-container {
  padding: 10px;
  background: #f7f7f9 !important;
}

.dashboard {
  &-container {
    // padding-top: 10px;
    background-color: white;
    position: relative;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.bg {
  background: #fcfcfc;
  border-radius: 10px;
  opacity: 1;
  border: 1px solid #e7e7e7;
}

.info {
  font-size: 12px;
  color: #fff;
  height: 160px;
  background-image: url(../../assets/info-bg.png);
  background-repeat: no-repeat;
  background-position: right;
  background-color: #216afc;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
}

.search {
  width: 500px;
  height: 40px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #e7e7e7;
}

.icon {
  display: inline-block;
  line-height: 40px;
  cursor: pointer;
}

.icon-img {
  width: 40px;
  height: 40px;
  vertical-align: -15px;
  display: inline-block;
}

.daiban {
  height: 180px;
  width: 390px;
  background-image: url(../../assets/work/daiban.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 101%;
  border-radius: 10px;
  // border: 1px solid #E8BDA4;
  cursor: pointer;
}

.yiban {
  height: 180px;
  width: 390px;
  background-image: url(../../assets/work/yiban.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 101%;
  border-radius: 10px;
  cursor: pointer;
}

.lishi {
  height: 180px;
  width: 390px;
  background-image: url(../../assets/work/lishi.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 101%;
  border-radius: 10px;
  cursor: pointer;
}

.shoucang {
  height: 180px;
  width: 390px;
  background-image: url(../../assets/work/shoucang.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 101%;
  border-radius: 10px;
  cursor: pointer;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.red {
  width: 40px;
  height: 24px;
  line-height: 22px;
  background: #ff3737;
  border-radius: 30px 30px 30px 30px;
  border: 1px solid #ff3737;
  margin: 50px 0px 0px 90px;
}

.red-font {
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>
